<template>
  <div id="app">
    <Nav></Nav>
    <div class="cont">
      <div :style="{ display: nul ? 'block' : 'none' }">
        <header class="header">
          <div class="step">
            <el-steps :active="1" align-center>
              <el-step title="加入购物车"></el-step>
              <el-step title="生产订单"></el-step>
              <el-step title="激活订单"></el-step>
              <el-step title="支付"></el-step>
            </el-steps>
          </div>
        </header>
        <div class="subject">
          <div class="title">
            <div class="allcheckbox">
              <input
                type="checkbox"
                :checked="checkID.length === arr.length"
                @click="checkedAll()"
              />
            </div>
            <ul>
              <li>商品详情</li>
              <li>规格</li>
              <li>单价</li>
              <li>数量</li>
              <li>金额</li>
            </ul>
          </div>
          <div class="goods_lite">
            <div class="goods" v-for="data in arr" :key="data.index">
              <div class="select">
                <div class="checkbox">
                  <input
                    type="checkbox"
                    @click="checkedOne(data.itemId)"
                    :checked="checkID.indexOf(data.itemId) > -1"
                  />
                </div>
                <img :src="data.picUrl" />
              </div>
              <div class="describe">
                <ul>
                  <li>{{ data.itemTitleName }}</li>
                  <li>{{ data.color }}</li>
                </ul>
              </div>
              <ul class="pag">
                <li>{{ data.size }}</li>
                <li>{{ data.price }}</li>
                <li class="reckon">
                  <button class="click" @click="less(data.itemId)">
                    <span>-</span>
                  </button>
                  <p class="num">{{ data.amount }}</p>
                  <button class="click" @click="add(data.itemId)">
                    <span>+</span>
                  </button>
                </li>
                <li>{{ data.allMoney }}</li>
                <li class="del">
                  <template>
                    <el-button type="text" @click="open(data.itemId)">
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </template>
                </li>
              </ul>
            </div>
          </div>
          <div class="settlement">
            <p>已选购{{ num }}件商品</p>
            <p>总计:￥{{ price }}</p>
            <button @click="Settlement()">去结算</button>
          </div>
        </div>
      </div>
      <div class="empty" :style="{ display: nul ? 'none' : 'block' }">
        <div class="icon">
          <i class="el-icon-shopping-cart-full"></i>
        </div>
        <div class="text">
          <H3>您的购物车还是空的，赶紧行动吧！</H3>
          <a href="index.html">---我的首页---</a>
        </div>
      </div>
      <footer>
        <div class="best">
          <h4>热卖家具</h4>
        </div>
        <ul class="spread">
          <li v-for="photo in HOT" :key="photo.index">
           <a :href="'detail.html?id='+photo.picId"><img :src="photo.picUrl" /></a>
          </li>
        </ul>
      </footer>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Nav from "../../components/Nav.vue";
import Footer from "../../components/Footer.vue";
export default {
  data() {
    return {
      arr: [
        {
          userId: null,
          carId: 1,
          picUrl: "111",
          itemTitleName: "椅子",
          itemId: 1,
          price: 3000,
          color: "红色",
          size: "s",
          amount: 1,
          allMoney: 3000
        },
        {
          userId: null,
          carId: 2,
          picUrl: "44",
          itemTitleName: "床",
          itemId: 6,
          price: 3000,
          color: "蓝色",
          size: "M",
          amount: 1,
          allMoney: 3000
        },
        {
          userId: null,
          carId: 5,
          picUrl: "44",
          itemTitleName: "床",
          itemId: 4,
          price: 1500,
          color: "蓝色",
          size: "M",
          amount: 2,
          allMoney: 3000
        }
      ],
      del: [],
      price: 0,
      num: 0,
      checkID: [],
      isCheckedAll: false,
      nul: false,
      HOT: []
    };
  },
  mounted() {
    let token = localStorage.getItem("token") || "";
    let userID = localStorage.getItem("userID");
    if (token) {
      this.axios({
        method: "post",
        url: "http://129.28.184.223:8080/ShoppingCart/selectOne",
        headers: {
          "Content-Type": "application/json", //设置请求头请求格式为JSON
          token: token //设置token 其中K名要和后端协调好
        },
        data: {
          userId: userID
        }
      }).then(res => {
        this.arr = res.data.data;
        console.log(res);
        
        if (this.arr.length > 0) {
          this.nul = true;
          this.priceTotal();
          this.num = this.arr.length;
        } else {
          this.nul = false;
        }
      });
    } else {
      window.location.href = "login.html";
    }
    this.axios({
      method: "post",
      url: "http://129.28.184.223:8080/ShoppingCart/pic",
      headers: {
        "Content-Type": "application/json"
      }
    }).then(res => {
      this.HOT = res.data.data;
    });
  },
  methods: {
    checkedAll() {
      this.isCheckedAll = !this.isCheckedAll;
      if (this.isCheckedAll) {
        this.checkID = [];
        for (let i = 0; i < this.arr.length; i++) {
          this.checkID.push(this.arr[i].itemId);
        }
      } else {
        this.checkID = [];
      }
    },
    checkedOne(id) {
      let idIndex = this.checkID.indexOf(id);
      if (idIndex > -1) {
        this.checkID.splice(idIndex, 1);
      } else {
        this.checkID.push(id);
      }
      if (this.checkID.length === this.arr.length) {
        this.isCheckedAll = true;
      } else {
        this.isCheckedAll = false;
      }
    },
    priceTotal: function() {
      let str = 0;
      for (let i = 0; i < this.arr.length; i++) {
        str += parseInt(this.arr[i].allMoney);
      }
      this.price = str;
    },
    open(id) {
      this.$confirm("确定删除改商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.dele(id);
        })
        .catch();
    },
    dele: function(goods_id) {
      let data = this.arr.filter((v, i) => {
        if (this.arr[i].itemId == goods_id) {
          this.del.push(this.arr[i].carId);
          let arr = [];
          arr.push(this.arr[i].carId);
          this.axios
            .get("http://129.28.184.223:8080/ShoppingCart/deleteBycarId", {
              params: {
                carId: arr
              }
            })
            .then(function(res) {
              console.log(res);
            })
            .catch(function(error) {
              console.log(error);
            });
        }
        return this.arr[i].itemId != goods_id;
      });
      this.arr = data;
      this.priceTotal();
    },
    less: function(goods_id) {
      let data = this.arr.filter((v, i) => {
        if (this.arr[i].itemId == goods_id) {
          this.arr[i].amount -= 1;
          this.arr[i].allMoney = this.arr[i].amount * this.arr[i].price;
          if (this.arr[i].amount == 0) {
            this.dele(goods_id);
          }
        }
        return this.arr[i];
      });
      this.arr = data;
      this.priceTotal();
    },
    add: function(goods_id) {
      let data = this.arr.filter((v, i) => {
        if (this.arr[i].itemId == goods_id) {
          this.arr[i].amount += 1;
          this.arr[i].allMoney = this.arr[i].amount * this.arr[i].price;
        }
        return this.arr[i];
      });
      this.arr = data;
      this.priceTotal();
    },
    Settlement: function() {
      let data = this.checkID;
      let order = [];
      this.arr.filter((v, i) => {
        for (let j = 0; j < data.length; j++) {
          if (this.arr[i].itemId === data[j]) {
            return order.push(this.arr[i]);
          }
        }
      });
      localStorage.setItem("order", JSON.stringify(order));
      window.location.href = "order.html";
    }
  },
  components: { Footer, Nav }
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
input {
  -webkit-appearance: button;
}
.el-checkbox__inner {
  border: 1px solid #8f8f8f !important;
}
#app {
  margin-top: 85px;
  width: 1366px;
  min-width: 1366px;
  margin: 0 auto;
  .cont {
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    .header {
      position: relative;
      margin-top: 140px;
      height: 10px;
      .step {
        width: 1480px;
        position: absolute;
        left: -130px;
      }
    }
    .subject {
      color: #999999;
      margin-top: 120px;
      .title {
        position: relative;
        .allcheckbox {
          position: absolute;
          top: 8px;
          left: 10px;
        }
        ul {
          overflow: hidden;
          :nth-child(1) {
            margin-left: 70px;
          }
          :nth-child(2) {
            margin-left: 410px;
          }
        }
        li {
          margin-left: 35px;
          float: left;
          font-size: 13px;
          width: 100px;
          height: 22px;
          text-align: center;
          border: 1px solid #8f8f8f;
          border-radius: 3px;
          line-height: 22px;
        }
      }
      .goods {
        margin-top: 20px;
        overflow: hidden;
        position: relative;
        border-top: 1px solid #f2f2f2;
        padding-left: 10px;
        .select {
          float: left;
          div {
            float: left;
            height: 100px;
            line-height: 100px;
            margin-right: 20px;
          }
          img {
            height: 100px;
          }
        }
        .describe {
          float: left;
          li {
            float: left;
            font-size: 12px;
            padding: 5px 10px;
            border: 1px solid #8f8f8f;
            border-radius: 3px;
            margin-top: 32px;
            margin-left: 50px;
          }
        }
        .pag {
          position: absolute;
          left: 550px;
          li {
            width: 100px;
            float: left;
            font-size: 12px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border: 1px solid #8f8f8f;
            border-radius: 3px;
            margin-top: 32px;
            margin-left: 35px;
            button {
              color: #4f4f4f;
              outline: none;
              border: none;
              background: none;
              text-align: center;
            }
          }
          .reckon {
            border: none;
            button {
              float: left;
              width: 20px;
              height: 28px;
              line-height: 28px;
              border: 1px solid #8f8f8f;
            }
            p {
              margin-right: 12px;
              margin-left: 12px;
              float: left;
              width: 33px;
              border: 1px solid #8f8f8f;
            }
          }
          .del {
            width: 50px;
            border: none;
            position: relative;
            button {
              font-size: 20px;
              color: #8f8f8f;
              position: absolute;
              top: -6px;
            }
            button:hover {
              color: #1a1a1a;
            }
          }
        }
      }
      .settlement {
        margin-top: 50px;
        font-size: 14px;
        color: #8e8e8e;
        height: 60px;
        width: 100%;
        background: #f2f2f2;
        line-height: 60px;
        position: relative;
        :nth-child(1) {
          margin-left: 65px;
        }
        :nth-child(2) {
          position: absolute;
          right: 200px;
          font-size: 16px;
          color: #646464;
        }
        p {
          float: left;
        }
        button {
          position: absolute;
          right: 0;
          width: 150px;
          height: 100%;
          background: #1a1a1a;
          outline: none;
          border: none;
          color: #ffffff;
        }
      }
    }
    footer {
      margin-top: 40px;
      overflow: hidden;
      margin-bottom: 50px;
      .best {
        border-bottom: 2px solid #e9e9e9;
        height: 22px;
        h4 {
          font-size: 14px;
          color: #1a1a1a;
          text-align: center;
          width: 70px;
          margin-left: 20px;
        }
      }
      .spread {
        margin-top: 30px;
        width: 100%;
        overflow: hidden;
        li {
          height: 128px;
          width: 200px;
          float: left;
          text-align: center;
          img {
            height: 100%;
          }
        }
      }
    }
  }
  .empty {
    height: 450px;
    overflow: hidden;
    text-align: center;
    color: #aaa;
    .icon {
      margin-top: 180px;
      font-size: 120px;
    }
    .text {
      font-size: 20px;
      overflow: hidden;
      p {
        margin-left: 80px;
      }
      a {
        color: #383838;
        margin-left: 20px;
      }
    }
  }
}
</style>
